<!-- feedBack -->
<template>
  <div class="container">
    <navbar
      class="de-navbar"
      :vaniconL="true"
      :vaniconR="true"
      :noRight="true"
      :noLeft="false"
      iconNameL="arrow-left"
      iconNameR="search"
      :bgcolor="
        $route.params.platform == 1 ? 'rgb(55, 81, 255) !important' : ''
      "
      :bgImage="
        $route.params.platform == 1
          ? 'linear-gradient(rgb(55, 81, 255) 0%, rgb(76, 99, 255) 50%, rgb(91 112 255) 75%, rgb(107 127 255) 100%) !important'
          : ''
      "
      @clickLeft="goBack"
      >问题反馈</navbar
    >
    <div style="height: 0.45rem"></div>
    <p class="tips">
      请把您遇到的问题告诉我们，如果能附上您对这个问题的看法和解决方案，就更棒了。
    </p>
    <div class="ques">
      <p class="title">请问，您遇到了什么问题呢？（可多选）</p>
      <van-checkbox-group v-model="result">
        <van-cell-group>
          <van-cell
            v-for="(item, index) in list"
            clickable
            :key="item"
            :title="`${item}`"
          >
            <template #right-icon>
              <van-checkbox
                @click="toggle(index)"
                :name="item"
                ref="checkboxes"
              />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </div>
    <div class="ques">
      <p class="title">请具体描述一下问题过程</p>
      <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="100"
        placeholder="请输入"
        show-word-limit
      />
    </div>
    <div class="ques">
      <p class="title">请附上相关截图</p>
      <el-upload
        class="upload-demo"
        drag
        accept="image/*"
        action="https://ds.pushiyixue.com/ds/upload/apps_feetback_upload"
        multiple
        :data="uploadData"
        :file-list="fileList"
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
        :show-file-list="true"
        :on-error="handleError"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text"><em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          只能上传jpg/png文件，每张20M以内
        </div>
      </el-upload>
    </div>
    <van-button
      @click="sendFeed"
      class="sub-btn"
      type="primary"
      color="#4779e7"
      round
      block
      >提交
    </van-button>
  </div>
</template>

<script>
import { Toast } from "vant";
import navbar from "@/components/navbar";
import { sendFeedback } from "@/api/feedback";
import { mapGetters } from "vuex";
export default {
  name: "feedBack",
  data() {
    return {
      list: [
        "账号相关",
        "程序故障（报错，没反应）",
        "功能操作",
        "界面（字体大小，颜色）",
        "其他",
      ],
      result: [],
      message: "",
      uploadData: {
        name: null,
        maxid: new Date().getTime(),
      },
      fileList: [],
      strArr: [],
    };
  },

  components: { navbar },

  computed: {
    ...mapGetters(["userData"]),
  },

  created() {
    this.userDatas = JSON.parse(this.userData);
    this.uploadData.name = this.userDatas.userName;
    Toast.setDefaultOptions({ duration: 500 });
    Toast.loading({
      message: this.$t("detailList.loading"),
      forbidClick: true,
      overlay: true,
    });
  },
  mounted() {},

  methods: {
    // 返回上一页
    goBack() {
      if (this.$route.params.platform == 0) {
        this.$router.replace({ path: "/readList" });
      } else {
        this.$router.replace({ path: "/dindex" });
      }
    },
    toggle(index) {
      console.log(index);
    },
    handleSuccess(response, file, fileList) {
      console.log(response, 1);
    },
    beforeUpload(file) {
      let isLt20M = file.size / 1024 / 1024 < 20;
      if (!isLt20M) {
        Toast.setDefaultOptions({ duration: 2000 });
        Toast.fail("上传图片大小不能超过20MB");
      }
      // return false
      return isLt20M;
    },
    handleError(err, file, fileList) {
      console.log(err, 3);
    },
    // 提交
    sendFeed() {
      let { message, result, uploadData, userDatas } = this;
      let mes = this.result.join(",");
      let val;
      if (this.$route.params.platform == 0) {
        val = userDatas.userName;
      } else {
        val = userDatas.name;
      }
      sendFeedback(mes, val, message, uploadData.maxid).then((res) => {
        console.log(res);
        if (res.data.status == 200) {
          Toast.success("提交成功");
          setTimeout(() => {
            this.goBack();
          }, 1500);
        } else {
          Toast.fail("提交失败");
        }
      });
    },
  },
};
</script>
<style lang='scss' scoped>
@import "../../assets/css/utils";
.container {
  position: relative;
  background: #f5f5f5;
  padding-bottom: 0.2rem;
  & .tips {
    width: 90%;
    margin: 0 auto;
    margin-top: 0.1rem;
    text-align: left;
    font-size: 0.16rem;
    line-height: 0.2rem;
  }
  & .ques {
    width: 90%;
    margin: 0 auto;
    margin-top: 0.1rem;
    background: #ffffff;
    padding: 0.2rem 0 0 0;
    border-radius: 0.01rem;
    box-shadow: 0.01rem 0.01rem 0.05rem #888888;
    text-align: left;
    & .title {
      font-size: 0.14rem;
      margin-bottom: 0.2rem;
      margin-left: 0.16rem;
    }
    & /deep/ .van-cell__title {
      font-size: 0.14rem;
    }
  }
}
/deep/ .el-upload {
  width: 100%;
}
/deep/ .el-upload-dragger {
  width: 100%;
  height: 1.65rem;
}
.sub-btn {
  width: 90%;
  margin: 0 auto;
  margin-top: 0.2rem;
}
.upload-demo {
  padding: 0 0.2rem 0.2rem;
}
</style>